import React, { useState } from "react";
import "./Index.css";
import { Button, Form, Input } from "antd-mobile";
import { NavBar} from 'antd-mobile'
import {
  EyeInvisibleOutline,
  EyeOutline,
} from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";

function Index() {
  const nav=useNavigate()
  const [visible, setVisible] = useState(false);
  return (
    <div className="reg">
          <NavBar style={{color:'white'}}>设置新密码</NavBar>
      <div className="biao"></div>

      <div className="frrm">
        <Form className="fn">
        <Form.Item
            label=""
            name="password"
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
              <Input
                placeholder="请设置密码"
                clearable
                type={visible ? "text" : "password"}
              />
          </Form.Item>





          <Form.Item
            label=""
            name="password"
            extra={
              <div>
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
              <Input
                placeholder="请再次确认密码"
                clearable
                type={visible ? "text" : "password"}
              />
          </Form.Item>
        </Form>
      </div>

      <div className="btn">
        <Button block type="submit" color="primary" style={{background:'white',color:'blue'}} 
        onClick={()=>nav('/login')}
        >
          完成
        </Button>
      </div>
    </div>
  );
}

export default Index;
